iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
2

今天來介紹 CSS 的 @import

前言

「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看 ?。

「重新認識 CSS」系列文章發文於:

@import 規則可以從其他 style sheet 中 import 樣式規則。

@import 語法

@import 語法有兩種寫法:

  • url() 內包含 style sheet 的 URI
  • 直接寫 style sheet 的 URI 的字串

例如:

@import "mystyle.css";
@import url("mystyle.css");

解析語法錯誤處理

如果 @import 規則符合下面任一項,UA 就會忽略該 @import 規則:

  • 在其他所有規則之後使用 @import 規則 ( @charset 規則除外)
  • 在 block 內使用 @import 規則,例如:在 @media block 內使用

在其他所有規則之後使用 @import

例如:如果 CSS 2.2 parser 遇到以下 style sheet:

@import "subs.css";
h1 { color: blue }
@import "list.css";

根據 CSS 2.2 規範,上面範例中的第二個 @import 規則 (也就是 @import "list.css"; ) 會無效,因為 @import 必須寫在其他規則的前面,所以 CSS 2.2 parser 會忽略第二個 @import 規則,最後會將 style sheet 縮減以下這樣:

@import "subs.css";
h1 { color: blue }

在 block 內使用 @import

例如:如果只想在 print media 上 import style sheet,第二個 @import 規則 (也就是 @import "print-main.css"; ) 會無效,因為此 @import 規則不能在 @media block 內使用:

@import "subs.css";
@media print {
  @import "print-main.css";
  body { font-size: 10pt }
}
h1 {color: blue }

正確的寫法是在 @import 規則後面加上要指定的 media type,例如:

@import "subs.css";
@import "print-main.css" print;
@media print {
  body { font-size: 10pt }
}
h1 {color: blue }

如果想了解其他 media type,可參閱在此系列中的另一篇「重新認識 CSS - media type」。

資料來源:


上一篇
重新認識 CSS - Media query
下一篇
重新認識 CSS - Box model (前傳)
系列文
重新認識 CSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言